<template lang="html">
  <div class="city-hot">
    <SearchNav />
    <div class="tabs">
      <tabs :value="value" @getIndex="getCurrentIndex">
        <tab label="城市最火" index="1">
          <ul class="city-hot-ul">
            <li v-for="(item,index) in swiperSlides" :key="index">
              <div class="list">
                <img :src="item.img" alt="">
                <div class="city-hot-ul-bottom">
                  <div class="icon"></div>
                  <span>{{ item.cityName }}</span>
                </div>
              </div>
            </li>
          </ul>
        </tab>
        <tab label="人气最高" index="2">
          <ul class="city-hot-ul">
            <li v-for="(item,index) in swiperSlides" :key="index">
              <img :src="item.img" alt="">
              <div class="city-hot-ul-bottom">
                <div class="icon"></div>
                <span>{{ item.cityName }}</span>
              </div>
            </li>
          </ul>
        </tab>
        <tab label="距离最近" index="3">
          <ul class="city-hot-ul">
            <li v-for="(item,index) in swiperSlides" :key="index">
              <img :src="item.img" alt="">
              <div class="city-hot-ul-bottom">
                <div class="icon"></div>
                <span>{{ item.cityName }}</span>
              </div>
            </li>
          </ul>
        </tab>
      </tabs>
    </div>
  </div>
</template>

<script>
import SearchNav from "../../components/SearchNav.vue"
export default {
  name:"CityHot",
  data(){
    return{
      value:1,
      swiperSlides:[
        {
          id:1,
          img:require("../../assets/img/banner1.png"),
          cityName:'桂林'
        },
        {
          id:2,
          img:require("../../assets/img/banner2.png"),
          cityName:'成都'
        },
        {
          id:3,
          img:require("../../assets/img/banner3.png"),
          cityName:'新疆'
        },
        {
          id:4,
          img:require("../../assets/img/banner4.png"),
          cityName:'安徽'
        },
        {
          id:5,
          img:require("../../assets/img/Strategy_img01.png"),
          cityName:'河北'
        },
        {
          id:6,
          img:require("../../assets/img/Strategy_img02.png"),
          cityName:'西安'
        }
      ],
    }
  },
  methods:{
    getCurrentIndex(index){
      this.value = index;
    }
  },
  components:{
    SearchNav
  }
}
</script>

<style lang="css" scoped>
  .city-hot{
    font-size: 16px;
    background-color: #ccc;
  }

  .tab.active{
    color: #7DD19D !important;
  }
  .tab{
    margin-right:0 !important;
    bottom: 0 !important;
    background-color: #fff;
  }
  .list{
    box-sizing:border-box;
    background-color: #ccc;
  }
  .city-hot-ul li{
    margin-top: 0.2rem;
    background-color: #fff;
    padding: 0.2rem 0.2rem 0 0.2rem;
  }
  .city-hot-ul li img{
    width: 100%;
  }
  .icon{
    width: 0.5rem;
    height: 0.5rem;
    display: inline-block;
    /* background-color: red; */
    background: url(../../assets/icon/city_JL.png) no-repeat;
    background-size: cover;
    margin-right: 0.05rem;
  }
  .city-hot-ul-bottom{
    height: 0.6rem;
    position: relative;
    /* overflow: hidden; */
    background-color: #fff;
  }
  .city-hot-ul-bottom span{
    position: absolute;
    font-size: 14px;
    top: 0.05rem;
  }
</style>
